<template>
  <el-form
    ref="clientForm"
    :model="clientForm"
    :rules="rules"
    label-width="87px"
    label-position="right"
  >
    <el-row>
      <el-col :span="12">客户信息</el-col>
    </el-row>
    <el-divider content-position="center"></el-divider>
    <el-row :gutter="5">
      <el-col :span="6">
        <el-form-item
          label="客户类型:"
          prop="type"
        >
          <el-radio-group v-model="clientForm.clientType">
            <el-radio-button
              v-for="item in dict['客户类型']"
              :key="item.index"
              :disabled="disabledType"
              :label="item.text"
              :value="item.value"
            >{{ item.text }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-if="clientForm.clientType !== '个人客户'"
      >
        <el-form-item
          label="联系人:"
          prop="clientName"
        >
          <el-input
            clearable
            :disabled="disabledType"
            v-model="clientForm.clientName"
          />
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-if="clientForm.clientType !== '个人客户'"
      >
        <el-form-item
          label="联系电话:"
          prop="phone"
        >
          <el-input
            clearable
            :disabled="disabledType"
            v-model="clientForm.phone"
          />
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-if="clientForm.clientType !== '个人客户'"
      >
        <el-form-item
          label="打印抬头:"
          prop="print"
        >
          <el-input
            clearable
            :disabled="disabledType"
            v-model="clientForm.companyTitle"
          />
        </el-form-item>
      </el-col>

      <el-col
        :span="6"
        v-if="clientForm.clientType === '个人客户'"
      >
        <el-form-item
          label="客户名称:"
          prop="clientName"
        >
          <el-input
            style="width: 200px"
            clearable
            :disabled="disabledType"
            v-model="clientForm.clientName"
          />
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-if="clientForm.clientType === '个人客户'"
      >
        <el-form-item
          label="手机号:"
          prop="phone"
        >
          <el-input
            style="width: 200px"
            clearable
            :disabled="disabledType"
            v-model="clientForm.phone"
          />
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-if="clientForm.clientType === '个人客户'"
      >
        <el-form-item
          label="性别:"
          prop="genderCst"
        >
          <el-radio
            v-model="clientForm.genderCst"
            :disabled="disabledType"
            :label="item.text"
            :value="item.value"
            v-for="item in dict['性别']"
            :key="item.index"
          >{{ item.text }}</el-radio>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-form-item
          label="驾驶证号:"
          prop="jszNum"
        >
          <el-input
            style="width: 200px"
            clearable
            :disabled="disabledType"
            v-model="clientForm.jszNum"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item
          label="驾驶证到期:"
          prop="jszExpireTime"
        >
          <el-date-picker
            v-model="clientForm.jszExpireTime"
            :disabled="disabledType"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="date"
            placeholder="到期时间"
            style="width: 200px"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-if="clientForm.clientType === '个人客户'"
      >
        <el-form-item
          label="生日:"
          prop="birthday"
        >
          <el-date-picker
            v-model="clientForm.birthday"
            :disabled="disabledType"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="date"
            placeholder="选择生日"
            style="width: 200px"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-if="clientForm.clientType !== '个人客户'"
      >
        <el-form-item
          label="单位名称:"
          prop="companyName"
        >
          <el-input
            clearable
            style="width: 200px"
            :disabled="disabledType"
            v-model="clientForm.companyName"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item
          label="地址:"
          prop="address"
        >
          <el-input
            clearable
            style="width: 200px"
            :disabled="disabledType"
            v-model="clientForm.address"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-form-item
          label="会员等级:"
          prop="memberLevelDictId"
        >
          <el-select
            clearable
            ref="dragSelect"
            v-model="clientForm.memberLevelDictId"
            :disabled="disabledType"
          >
            <el-option
              v-for="item in dict['客户会员等级']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item
          label="客户来源:"
          prop="clientSource"
        >
          <el-select
            clearable
            :disabled="disabledType"
            ref="dragSelect"
            v-model="clientForm.clientSource"
            class="drag-select"
          >
            <el-option
              v-for="item in dict['客户来源']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-if="clientForm.clientType === '个人客户'"
      >
        <el-form-item
          label="所属门店:"
          prop="storeId"
        >
          <job-shop
            v-model="clientForm.storeId"
            placeholder="任职门店"
            :disabled="disabledType"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item label="备注:">
          <el-input
            type="textarea"
            style="width:800px"
            clearable
            :autosize="{ minRows: 4, maxRows: 4}"
            :disabled="disabledType"
            v-model="clientForm.remark"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="客户喜好:">
          <el-input
            type="textarea"
            clearable
            :autosize="{ minRows: 4, maxRows: 4}"
            style="width:800px"
            :disabled="disabledType"
            v-model="clientForm.clientLike"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="24"
        align="right"
      >
        <el-button
          type="primary"
          :disabled="disabledType"
          @click="saveUpdate()"
        >新增客户</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { parseTimeToYMDHMS, getDict } from "@/utils";
import { addClient, getClientById } from "@/api/after-sale/client/client";
import JobShop from "../JobShop/index";
export default {
  components: { JobShop },
  props: {
    clientInfo: {
      type: Object,
      default: function () {
        return {
          address: "", //住址
          birthday: "", //出生日期
          cars: [], // 车辆信息
          clientLike: "", //客户喜好
          clientName: "", //客户名称
          clientSource: "注册客户", //客户来源
          clientType: "个人客户", //客户类型
          companyName: "", //公司名称
          jszExpireTime: "", //驾驶证到期日期
          jszNum: "", //驾驶证号
          genderCst: "男", //性别
          id: "", //客户id
          memberLevelDictId: "", //会员等级
          phone: "", //手机号
          companyTitle: "", //打印公司抬头
          remark: "", //备注
          storeId: "", //门店id
        };
      },
    },
  },
  data () {
    return {
      dict: {},
      clientForm: {},
      rules: {
        clientName: [{ required: true, message: "客户名称不能为空", trigger: "blur" }],
        companyName: [{ required: true, message: "单位名称不能为空", trigger: "blur" }],
        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
        memberLevelDictId: [
          { required: true, message: "会员等级不能为空", trigger: "blur" },
        ],
        clientSource: [{ required: true, message: "客户来源不能为空", trigger: "blur" }],
        storeId: [{ required: true, message: "所属门店不为空", trigger: "blur" }],
      },
      disabledType: false,
    };
  },
  async created () {
    this.dict = getDict(["客户来源", "性别", "客户类型", "客户会员等级"]);
    this.clientForm = this.clientInfo;
  },
  methods: {
    async saveUpdate () {
      this.$refs.clientForm.validate((valid) => {
        if (valid) {
          let params = this.clientForm;
          addClient(params).then((res) => {
            let { success, data } = res;
            if (success) {
              this.$message.success("新增客户成功");
              this.$emit("clientForm", data);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  mounted () { },
};
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
